<template>
  <div class="s-warp">
    <n-modal class="s-model" label-placement="left" label-width="auto" require-mark-placement="right-hanging" :style="{
        width: '500px',
        background: 'linear-gradient( 180deg, #0E2B4A 0%, #081C2B 100%)',
        color: '#fff',
      }" v-model:show="modal" :show-icon="false" preset="dialog">
      <div class="title fs16 title-no-line">{{formParams.id ? '编辑': '新增'}}变量</div>
      <div class="title-line"></div>
      <n-form ref="formRef" :model="formParams" require-mark-placement="left" :rules="rules" label-placement="left"
        label-width="120px">
        <n-row :gutter="[0, 24]">
          <n-col :span="24">
            <div class="s-input">
              <!-- 
              // var_name(变量名称)
              // device_name(门禁设备名称)
              // au_type(鉴权方式 0 - 门卡 1 - 开门密码 2 - 指纹 3 - 人脸)
              // status(结果 1 - 成功 2 - 失败)
              // user_name(员工姓名)
              // dept_name(部门)
              // time_frame(时间范围 1 - 最近1小时 2 - 最近12小时 3 - 最近1天 4 - 最近7天 5 - 最近30天) -->
              <n-form-item label="变量名称" path="var_name">
                <n-input clearable v-model:value="formParams.var_name" placeholder="请输入" />
              </n-form-item>

              <n-form-item label="门禁设备名称" path="device_name">
                <n-input clearable v-model:value="formParams.device_name" placeholder="请输入" />
              </n-form-item>

              <n-form-item label="鉴权方式" path="au_type">
                <n-select clearable filterable placeholder="请选择" :options="auTypeOptions"
                  v-model:value="formParams.au_type" />
              </n-form-item>

              <n-form-item label="结果" path="status">
                <n-select clearable filterable placeholder="请选择" :options="statusOptions"
                  v-model:value="formParams.status" />
              </n-form-item>

              <n-form-item label="员工姓名" path="user_name">
                <n-select clearable filterable placeholder="请选择" :options="userNameOptions"
                  v-model:value="formParams.user_name" />
              </n-form-item>

              <n-form-item label="部门" path="dept_name">
                <n-select clearable filterable placeholder="请选择" :options="deptNameOptions"
                  v-model:value="formParams.dept_name" />
              </n-form-item>

              <n-form-item label="时间范围" path="time_frame">
                <n-select clearable filterable placeholder="请选择" :options="timeFrameOptions"
                  v-model:value="formParams.time_frame" />
              </n-form-item>

            </div>
          </n-col>
        </n-row>
      </n-form>
      <template #action>
        <n-space class="btns">
          <div class="btn cancel" @click="cancel">取消</div>
          <div class="btn confirm" @click="confirmForm">确认</div>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, h, watch, onMounted } from 'vue';
  // import { accVarEditFormEdit, accVarEditFormGet } from '@/api/GlobalVarMgt/GlobalVarMgt';  // todo open 
  import { useMessage } from 'naive-ui';
  const message = useMessage();
  const emits = defineEmits(['callback']);
  let modal = ref(false);
  // 提交数据
  // var_name(变量名称)
  // device_name(门禁设备名称)
  // au_type(鉴权方式 0 - 门卡 1 - 开门密码 2 - 指纹 3 - 人脸)
  // status(结果 1 - 成功 2 - 失败)
  // user_name(员工姓名)
  // dept_name(部门)
  // time_frame(时间范围 1 - 最近1小时 2 - 最近12小时 3 - 最近1天 4 - 最近7天 5 - 最近30天)
  let formParams = ref({
    id: '',
    var_name: '',
    device_name: '',
    au_type: '',
    status: '',
    user_name: '',
    dept_name: '',
    time_frame: '',
  });
  // 表单提交验证规则
const rules = {
  var_name: { required: true, trigger: 'blur', message: '请输入' },
  device_name: { required: true, trigger: 'blur', message: '请输入' },
  au_type: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  status: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  user_name: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  dept_name: { required: true, type: 'number', trigger: 'change', message: '请选择' },
  time_frame: { required: true, type: 'number', trigger: 'change', message: '请选择' },
};
// 结果下拉数据 
// 结果 1 - 成功 2 - 失败
let statusOptions = [
  { label: '成功', value: 1 },
  { label: '失败', value: 2 },
];
// 鉴权方式下拉数据
// 鉴权方式 0-门卡 1-开门密码 2-指纹 3-人脸
let auTypeOptions = [
  { label: '门卡', value: 0 },
  { label: '开门密码', value: 1 },
  { label: '指纹', value: 2 },
  { label: '人脸', value: 3 },
]

// 员工姓名下拉数据
let userNameOptions = [
  { label: '张三', value: 1 },
]

// 部门名称下拉数据
let deptNameOptions = [
  { label: '市场部', value: 1 },
]

// 时间范围下拉数据
// 时间范围 1 - 最近1小时 2 - 最近12小时 3 - 最近1天 4 - 最近7天 5 - 最近30天
let timeFrameOptions = [
  { label: '最近1小时', value: 1 },
  { label: '最近12小时', value: 2 },
  { label: '最近1天', value: 3 },
  { label: '最近7天', value: 4 },
  { label: '最近30天', value: 5 },
]

  // 提交表单ref
  const formRef = ref(null);
  // 初始化数据
  async function init(params) {
    formParams.value = {
      id: '',
      var_name: '',
      device_name: '',
      au_type: '',
      status: '',
      user_name: '',
      dept_name: '',
      time_frame: '',
    }
    // todo open -- start  
    // let res = await accVarEditFormGet({ id: params.id })
    // if (res.code == 200) {
    //   formParams.value = { ...formParams.value, ...res.data };
    // }
    // todo open -- end
    modal.value = true;
  }

  // 弹窗模板关闭
  function closeDialog() {
    modal.value = false;
  }
  // 取消
  function cancel() {
    modal.value = false;
  }
  // 数据提交
  function confirmForm() {
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        let res = await accVarAddFormAdd(formParams.value);
        if (res.code == 200) {
          modal.value = false;
          message.success(res.msg || '成功');
          modal.value = false;
          // 刷新列表
          emits('send', 'refreshTable');
        }
        if (res.code != 200) {
          message.error(res.msg || '失败');
        }
      }
    });
  }
  // 页面初始化
  onMounted(() => {

  })
  // 向外暴露方法
  defineExpose({
    init,
  });
</script>
<style lang="less" scoped>
  .fs16 {
    font-size: 16px;
  }

  .mgt10 {
    margin-top: 10px;
  }

  .input {
    border: 1px solid #25435e;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: none;
    padding-left: 10px;
  }

  .btn {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 14px;
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .cancel {
    background: linear-gradient(180deg,
        rgba(#375b8a, 0.5) 0%,
        rgba(103, 107, 109, 0.1) 45%,
        rgba(103, 107, 109, 0.1) 55%,
        rgba(#375b8a, 0.5) 100%);
  }

  .confirm {
    background: linear-gradient(180deg,
        rgba(#2282e3, 0.5) 0%,
        rgba(103, 107, 109, 0.1) 45%,
        rgba(103, 107, 109, 0.1) 55%,
        rgba(#2282e3, 0.5) 100%);
  }

  .form-item {
    width: 100%;
  }

  .table {
    width: 100%;
  }

  .line {
    border-bottom: 1px solid #2e4563;
    margin-bottom: 20px;
  }

  .title {
    border-bottom: 1px solid #2e4563;
    padding-bottom: 10px;
    margin-bottom: 20px;
  }

  .title-no-line {
    border-bottom: none;
  }

  .flr {
    float: right;
  }

  .fll {
    float: left;
  }

  .cf:after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .cf {
    zoom: 1;
  }

  .text-blue {
    color: #2282e3;
    cursor: pointer;
    text-decoration: underline;
  }

  .title-line {
    position: absolute;
    top: 36px;
    left: -28px;
    width: calc(100% + 56px);
    height: 1px;
    background: #25435e;
  }
</style>

<style>
  .s-input {
    width: 100%;
  }

  .s-input .n-input {
    background: none;
    width: 100%;
  }

  .s-input .n-form-item-label__text {
    color: #fff !important;
  }

  .s-input .n-input__input-el {
    color: #fff !important;
  }

  .s-table .n-input {
    background: none;
    color: #fff;
  }

  .s-table .n-input__input-el {
    color: #fff !important;
  }

  .s-input .n-input__state-border {
    border: none !important;
  }

  .s-table .n-select {
    background: none !important;
  }

  .s-table .n-base-selection-label {
    background: none !important;
  }

  .s-table .n-base-selection-input__content {
    color: #fff;
  }

  .s-warp .n-input_focus {
    background: red;
  }

  .s-warp .n-input--disabled {
    background: #333 !important;
  }

  .s-input .n-base-selection-label {
    background: none !important;
  }

  .s-input .n-base-selection-label__render-label {
    color: #fff !important;
  }

  .s-input .n-input__border {
    border: 1px solid #25435e !important;
  }

  .s-input .n-base-selection__border {
    border: 1px solid #25435e !important;
  }

  .s-table .n-input__border {
    border: 1px solid #25435e !important;
    /* border: none !important; */
  }

  .s-table .n-base-selection__border {
    border: 1px solid #25435e !important;
    /* border: none !important; */
  }

  .s-input .n-input--focus {
    background: none !important;
  }

  .s-table .n-input--focus {
    background: none !important;
  }

  .r-boder .n-base-selection__border {
    border: none !important;
  }

  .r-boder .n-input__border {
    border: none !important;
  }

  .r-table .n-data-table .n-data-table-th {
    background: none !important;
  }

  .r-table .n-data-table .n-data-table-td {
    background: none !important;
  }

  .r-table .n-data-table.n-data-table--bottom-bordered .n-data-table-td.n-data-table-td--last-row {
    border-bottom: none !important;
  }

  .r-table .n-data-table-table {
    background: none !important;
  }

  .r-table .n-data-table-thead {
    background: none !important;
  }

  .r-table .n-data-table-tr:hover {
    background: none !important;
  }

  .r-boder .n-base-icon {
    display: none !important;
  }

  .r-boder .n-input__state-border {
    display: none !important;
  }

  .r-boder .n-base-selection__state-border {
    display: none !important;
  }

  .r-boder .n-base-selection-input__content {
    color: #006fff !important;
  }

  .n-dialog .n-base-select-menu {
    border: 1px solid #25435e !important;
    background: #0b1d2e !important;
  }

  .n-base-select-option__content {
    color: #d7e7f6 !important;
  }

  .n-base-select-option.n-base-select-option--pending::before {
    background: rgba(161, 159, 159, 0.1) !important;
  }

  .s-model .n-data-table-td {
    position: relative;
  }

  .r-boxed {
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    width: 400px;
    height: 36px;
    border: 1px solid #25435e;
    border-radius: 4px;
  }

  .s-model .n-base-suffix__arrow {
    width: 0;
    height: 0;
    border-top: 4px solid #869fb7;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
  }

  .s-model .n-base-suffix__arrow svg {
    display: none;
  }

  .s-input .n-button--medium-type {
    display: none !important;
  }

  .s-upload {
    margin-top: 10%;
    text-align: center;

    margin-left: 5%;
  }

  .s-upload .n-upload-trigger {
    border: 1px solid #25435e;
    padding: 40px 20px;
    color: #869fb7;
  }

  .s-model {
    padding-top: 0 !important;
  }

  .s-model .n-dialog__close {
    top: -10px !important;
  }
</style>